<template>
  <div style="height: 200px;align-content: center;">
    <van-radio-group  v-model="checked" style="display: flex;flex-direction: row;justify-content: center;margin-top: 50px">
      <van-radio name="0" icon-size="70px">
        <template #icon="props">
          <van-image v-if="props.checked" src="http://120.26.146.100:8889/public/boySelect.png" style="width: 40px;height: auto;margin-right: 10px" fit="cover"/>
          <van-image v-else src="http://120.26.146.100:8889/public/boyNoSelect.png" style="width: 40px;height: auto;margin-right: 10px" fit="cover"/>
        </template>
        <span>
        男
      </span>
      </van-radio>


      <van-radio name="1" icon-size="70px" style="margin-left: 20px">

        <template #icon="props">
          <van-image v-if="props.checked" src="http://120.26.146.100:8889/public/girlSelect.png" style="width: 40px;height: auto;margin-right: 10px" fit="cover"/>
          <van-image v-else  src="http://120.26.146.100:8889/public/girlNoSelect.png" style="width: 40px;height: auto;margin-right: 10px" fit="cover"/>
        </template>
        女
      </van-radio>

    </van-radio-group>


    <div style="margin-top: 20px;text-align: center; display: flex; align-items: center; justify-content: center;">
      <van-image src="http://120.26.146.100:8889/public/gender.png" style="width: 35px;height: auto;margin-right: 10px" fit="cover"/>
      <van-button type="warning" @click="addGenderToTagSelect">选择</van-button>
    </div>
  </div>

</template>

<script setup lang="ts">
import {useRouter} from "vue-router";
import {ref} from "vue";

const router = useRouter();
const checked = ref('0');


const addGenderToTagSelect = ()=>{
  if (checked.value == '0') {
    router.push('/tagsSelect');
  }else {//选了女 才去修改数据库 
    router.push({
      path: '/tagsSelect',
      query: {
        gender: 1
      }
    });
  }
}




</script>

<style scoped>
.van-radio-group :deep(.van-radio .van-radio__icon){
  display: flex;
  align-items: center;
  justify-items: center;
}


</style>